<template>
  <uni-nav-bar title="附近车友团" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <Ordinary :fillLists="fillLists"></Ordinary>
  </scroll-view>
  <view class="enthusiast" @click="redirectTo('team/newTeam')">创建车友团</view>
  <!-- 当前位置经纬度 -->
  <Lotlats @position="position" ref="Lotlat"></Lotlats>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { navBack, redirectTo } from '@/utils/navigator';
  import { showLoading } from '@/utils/prompt';
  import Ordinary from '@c/team/ordinary.vue';
  import { toPublish } from '@mqtt';
  import { GetCities, getTeamListByFill } from '@/gql/team';
  import Lotlats from '@c/team/Lotlat.vue';
  const pageHeight = ref()
  const code = ref('')

  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const fillLists=ref([])
  onMounted(() => {
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = (res.windowHeight - 120).toString();
      },
    });
  })
  function position(lat : number, lot : number) {
    const payload = {
      query: GetCities,
      variables: {
        lon: lot,
        lat: lat,
      },
    };
    toPublish('ql/team/getCity', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      code.value = data.get_city.code;
      fillLists.value=[]
      currentPage.value=1
      init()
    });
  }
  function init() {
    const fill_id = uni.getStorageSync('fillingID')
    showLoading('正在加载')
    isLoading.value = true;
    const payload = {
      query: getTeamListByFill,
      variables: {
        page: currentPage.value,
        code: code.value,
        fill_id
      },
    };
    toPublish(
      'ql/team/getTeamListByFill',
      payload,
      (obj : any) => {
        const { get_team_list_by_fill } = obj.data;
        isLoading.value = false;
        fillLists.value = [...fillLists.value, ...get_team_list_by_fill.list];
        lastPage.value = get_team_list_by_fill.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
</script>

<style scoped lang="less">
  .enthusiast {
    width: 496rpx;
    height: 82rpx;
    background: #468FF5;
    border-radius: 5px;
    font-size: 36rpx;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 82rpx;
    margin: 20rpx auto;
  }
</style>